<template>
	<view class="page">
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor = "#fff" placeholder></up-navbar> -->
		<view class="padding-32 box-sizing">
			<view class="width-full" v-if="tabShow == true">
				<up-tabs :list="list1" lineWidth="30" lineColor="#51D580" :activeStyle="{
				        color: '#333',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)',
						borderRadius:'38rpx',
						fontSize:'32rpx'
				    }" :inactiveStyle="{
				        color: '#666',
				        transform: 'scale(1)',
						fontSize:'28rpx'
				    }" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;font-size:28rpx;" :scrollable="false"
					@click="tabClick" :current='current'>
				</up-tabs>
			</view>
			<view class="width-full" v-if="tabShow == false">
				<up-tabs :list="list2" lineWidth="30" lineColor="#51D580" :activeStyle="{
				        color: '#333',
				        fontWeight: 'bold',
				        transform: 'scale(1.05)'
				    }" :inactiveStyle="{
				        color: '#666',
				        transform: 'scale(1)'
				    }" itemStyle="padding-left: 30rpx; padding-right: 30rpx; height: 68rpx;" :scrollable="false"
					:current='current2' @click="tabClick2">
				</up-tabs>
			</view>
			<view class="marginTop-40">
				<view class="padding-30 borderRadius-30 colorBj-F5F5F5 marginBottom-20 box-sizing"
					v-for="item in historyList" :key='index' style="position: relative;">
					<view class="flex space-between color-51D580 fontSize-30">
						<view class="">
							{{item.wordHead}}
						</view>
						<view class="" v-if="type != 4">
							编码：{{item.sort_id}}
						</view>
					</view>
					<view class="marginTop-24 fontSize-26">
						{{item.tran}}
					</view>
					<view class="color-999 fontSize-26 flex space-between marginTop-36">
						<view class="">
							查询次数：{{item.search_num}}次
						</view>
						<view class="">
							{{item.lasttime}}
						</view>
					</view>
					<view class="status-section fontSize-26" :style="getStyleByStatus(item.status)"
						v-if="item.status == 0 || item.status == 1 ||item.status == 2">
						{{ getTextByStatus(item.status) }}
					</view>
				</view>
				<view class="" v-if="noWordShow == true">
					<image src="../../static/noWord-img.png" mode="" class="width-160 height-160"
						style="display: block; margin: 0 auto; margin-top: 268rpx;"></image>
					<view class="fontSize-28 color-999 marginTop-40 text-center">
						该词库暂无相关词哦
					</view>
				</view>

			</view>

			<uni-pagination :total="totalPage" title="标题文字" @change='changePage' class="pagination" />

		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		reactive
	} from 'vue';
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';
	import uCharts from "@/node_modules/@qiun/ucharts/u-charts.js";
	const searchWordsHisApi = inject('searchWordsHis');
	const list1 = reactive([{
			name: '生词库'
		},
		{
			name: '熟词库'
		},
		{
			name: '模糊词库'
		},
		{
			name: '后补词库'
		},
	]);
	const list2 = reactive([{
			name: '查询一次'
		},
		{
			name: '查询两次'
		},
		{
			name: '查询三次以上'
		}
	]);
	const type = ref(1)
	const page = ref(1)
	const current = ref(0)
	const current2 = ref(0)
	const historyList = ref([])
	const totalPage = ref(10)
	const tabShow = ref(true)
	const noWordShow = ref(false)

	onLoad((op) => {
		type.value = op.type
		console.log('op.id', op.id)
		getWordList()
		// 生词熟词
		if (op.id == 'ULODRXjgrKWzPKwOAATtfQOllomFNqky') {
			current.value = op.currentIndex
			console.log(current.value,1274)
			tabShow.value = true
		} else {
			current2.value = op.currentIndex
			tabShow.value = false
		}

	})
	const getWordList = () => {
		noWordShow.value = false
		searchWordsHisApi({
			type: type.value,
			page: page.value
		}).then(res => {
			console.log('res', res)
			historyList.value = res.wordList
			const count = res.count;
			console.log('count', count)
			totalPage.value = Math.ceil(count / 5) * 10
			if (count == 0) {
				noWordShow.value = true
			}
		})
	}
	// 根据status值获取对应的文本描述的函数
	const getTextByStatus = (status) => {
		switch (status) {
			case 0:
				return '待更新';
			case 1:
				return '已安家';
			case 2:
				return '错词';
			default:
				return '';
		}
	};


	// 根据status值获取对应的样式对象以直接设置背景颜色等样式的函数
	const getStyleByStatus = (status) => {
		switch (status) {
			case 0:
				return {
					backgroundColor: '#FFC300'
				};
			case 1:
				return {
					backgroundColor: '#51D580'
				};
			case 2:
				return {
					backgroundColor: '#DF2828'
				};
			default:
				return {};
		}
	};

	const changePage = (e) => {
		console.log('e', e)
		page.value = e.current
		getWordList()
	}

	const tabClick = (e) => {
		console.log('e', e)
		type.value = e.index + 1
		console.log('type.value', type.value)
		getWordList()
	}
	const tabClick2 = (e) => {
		console.log('e', e)
		type.value = e.index + 5
		console.log('type.value', type.value)
		getWordList()
	}
</script>
<style lang="scss" scoped>
	.pagination {
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 50%;
		transform: translateX(-50%);
		padding: 30rpx 32rpx;
		background-color: #fff;
		box-sizing: border-box;
	}

	.status-section {
		position: absolute;
		top: 0;
		right: 0;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		color: #fff;
		border-radius: 0rpx 30rpx 0rpx 30rpx;
	}

	@media (max-height: 800px) {
		.page {
			padding-bottom: 300rpx;
		}
	}
</style>
<script>
	export default {
		options: {
			styleIsolation: 'shared',
		},
	}
</script>